<template>
  <view class="calendar-price-item">
    <view class="calendar-price-item-date">{{ info.date | dateFilter }}</view>
    <!-- 零散小时 -->
    <template v-if="info.scattered_price">
      <view class="calendar-price-item-price">
        {{ `¥${info.scattered_price}` }}
        ({{ info.scattered_minutes | minutesFilter }})
      </view>
      <view class="calendar-price-item-price" style="text-decoration: line-through;">{{ `全日价¥${info.day_price}` }}</view>
    </template>
    <!-- 整日 -->
    <template v-else>
      <view class="calendar-price-item-price">{{ `¥${info.day_price}` }}</view>
    </template>
  </view>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: "expenseDetails",
  data() {
    return {
    };
  },
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  filters: {
    dateFilter(val) {
      var dayjsVal = dayjs(val)
      var week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      var weekStr = week[dayjsVal.day()]
      return `${dayjsVal.format('MM月DD日')} ${weekStr}`
    },
    minutesFilter(minutes) {
      // 分钟转小时分钟
      const hours = Math.floor(minutes / 60);
      const remainingMinutes = minutes % 60;
      const temp = []
      if (hours > 0) {
        temp.push(`${hours}小时`)
      }
      if (remainingMinutes > 0) {
        temp.push(`${remainingMinutes}分钟`)
      }
      return temp.join('')
    }
  },
	computed: {
	},
  methods: {
  },
};
</script>

<style lang="scss" scoped>
  .calendar-price-item {
    background-color: #f5f6f8;
    padding: 10rpx 6rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #6b6c6e;
    font-size: 28rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
  }
</style>
